<template>
	<div class="system-menu-container">
		<el-card class="system-menu-card221"  shadow="hover">
			<div class="system-menu-search mb15">
				<el-input clearable v-model="inputWatch" size="default" placeholder="请输入菜单名称" style="max-width: 180px"> </el-input>
				
				<el-button size="default" type="success" class="ml10" @click="onOpenAddMenu">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增菜单
				</el-button>
			</div>
			<el-table :height="activeHeight" :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				<el-table-column label="菜单名称" show-overflow-tooltip>
					<template #default="scope">
						<SvgIcon :name="scope.row.meta.icon" />
						<span class="ml10">{{ scope.row.meta.title }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
				<el-table-column width="200" label="组件路径" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ scope.row.component }}</span>
					</template>
				</el-table-column>
				<el-table-column label="权限标识" show-overflow-tooltip>
					<template #default="scope">
						<el-tag size="small" style="margin-right: 10px;" v-for='(item,index) in scope.row.meta.roles.split(",")' :key="index">
                             {{ item }}
						</el-tag>
						
					</template>
				</el-table-column>
				<el-table-column label="排序" show-overflow-tooltip width="80">
					<template #default="scope">
						{{ scope.row.menuSort }}
					</template>
				</el-table-column>
				<el-table-column label="类型" show-overflow-tooltip width="80">
					<template #default="scope">
						<el-tag type="success" size="small">{{ scope.row.xx }}菜单</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" show-overflow-tooltip width="140">
					<template #default="scope">
						
						<el-button size="small" text type="primary" @click="onOpenAddMenu( scope.row ,'add')">新增</el-button>
						<el-button size="small" text type="primary" @click="onOpenEditMenu('edit', scope.row)">修改</el-button>
						<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<MenuDialog ref="menuDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup name="systemMenu">
	import {defineAsyncComponent, ref, onMounted, reactive,watch} from 'vue'
	import {ElMessageBox, ElMessage} from 'element-plus'
	import {storeToRefs} from 'pinia'
	import {useRoutesList} from '/@/stores/routesList'
	
	import {DeleteMenu} from '../../../api/project'
	import { initBackEndControlRoutes } from '/@/router/backEnd';
	// 引入组件
	const MenuDialog = defineAsyncComponent(() => import('/@/views/system/menu/dialog.vue'))

	// 定义变量内容
	const stores = useRoutesList()
	const {routesList} = storeToRefs(stores)
	const menuDialogRef = ref()
	const state = reactive({
		tableData: {
			data: [],
			loading: true,
		},
	})

	let inputWatch = ref('')
	watch(inputWatch,()=>{
		
	 if(inputWatch.value){
		let data = JSON.parse(JSON.stringify(routesList.value))
	  state.tableData.data = deepFn(inputWatch.value,data)
	 }else{
		let data = JSON.parse(JSON.stringify(routesList.value))
		state.tableData.data = data
	 }
	})


	let deepFn = (id, data,parent='') => {
	
    let idsArr = [];
	console.log(data)
    data.forEach((v) => {
      if (v.children) {
        let deepArrr = deepFn(id, v.children,v);
       
       
        if(deepArrr.length>0){
          idsArr = idsArr.concat(deepArrr);
          
        }
      } 
  
      if (v.title.includes(id)) {
          idsArr.push(v)
         
        }
    });
 
    return idsArr;
  };

	let activeHeight = ref(0)
	// 获取路由数据，真实请从接口获取
	const getTableData = () => {
		state.tableData.loading = true
		state.tableData.data = routesList.value
		setTimeout(() => {
			state.tableData.loading = false
		}, 500)
	}
	// 打开新增菜单弹窗
	const onOpenAddMenu = (row,type) => {
		
		menuDialogRef.value.openDialog(type)
	}
	// 打开编辑菜单弹窗
	const onOpenEditMenu = (type, row) => {
		console.log(row)
		menuDialogRef.value.openDialog(type, row)
	}
	// 删除当前行
	const onTabelRowDel = row => {
		ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
			confirmButtonText: '删除',
			cancelButtonText: '取消',
			type: 'warning',
		})
			.then(async() => {
				await DeleteMenu({id:row.id})
				await initBackEndControlRoutes()
				ElMessage.success('删除成功')
				getTableData()
				//await setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
			})
			.catch(() => {})
	}
	// 页面加载时
	onMounted(() => {
		getTableData()
		activeHeight.value =
      document.querySelector(".system-menu-card221").clientHeight - 100;
    window.addEventListener("resize", () => {
      activeHeight.value =
        document.querySelector(".system-menu-card221").clientHeight - 100;
    });
	})
</script>
<style scoped lang="scss">
.system-menu-card221{
  height: calc(100vh - 120px);
}
</style>
